<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../themes/default/easyui.css"/>
    <link rel="stylesheet" href="../themes/icon.css"/>
    <script src="../jquery.min.js"></script>
    <script src="../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Basic Panel</h2>
<p>the panel is a container for other componernts or elements</p>
<div style="margin: 20px 0 10px 0;">
    <a href="#" class="easyui-linkbutton" onclick="javascript:$('#p').panel('open')">oPen</a>
    <a href="#" class="easyui-linkbutton" onclick="javascript:$('#p').panel('close')">close</a>
    <a href="#" class="easyui-linkbutton" onclick="javascript:$('#p').panel('extand',true)">extand</a>
    <a href="#" class="easyui-linkbutton" onclick="javascript:$('#p').panel('collpase',true)">collpase</a>
</div>
<!--面板主要是一些工具的使用data-options  还有页尾的引入-->
<div id="p" class="easyui-panel" title="Basic panel" style="width: 700px;height: 200px;padding: 10px;"
        data-options="iconCls:'icon-save',collapsible:true,minimizable:true,maximizable:true,closable:true,tools:'#tt',
        tools:[{iconCls:'icon-reload',handler:function(){$('#p').panel('refresh','_content.html')}}],
        footer:'#ft'">
    <p style="font-size: 14px">easy ui</p>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</div>
<div id="tt">
    <a href="javascript:void(0)" class="icon-add" onclick="javascript:alert('add')"></a>
    <a href="javascript:void(0)" class="icon-edit" onclick="javascript:alert('edit')"></a>
    <a href="javascript:void(0)" class="icon-cut" onclick="javascript:alert('cut')"></a>
    <a href="javascript:void(0)" class="icon-help" onclick="javascript:alert('help')"></a>
</div>
<div id="ft" style="padding: 5px">
    footer content
</div>
</body>
</html>